<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /* css 代码  */
    </style>
    <script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
    <div id="container" style="min-width:400px;height:400px"></div>
    <script>
        //  取仓
        var jsonDataList = JSON.parse(window.localStorage.getItem('jsonData'))

        $(function() {

                // jsonDataList = JSON.parse(window.localStorage.getItem('jsonData'))
                // console.log('8888888',jsonDataList)
            })
            // function number(x){
            //     if(x>0.075){
            //         return('A');
            //
            //     }
            //
            //     else if(x>0.035&&x<0.075){
            //         return('B');
            //
            //     }
            //
            //     else if(x>0&&x<0.035){
            //         return('C');
            //
            //     }
            //
            //     else if(x<-0.075){
            //         return('D');
            //     }
            //     else if(x<-0.035&&x>-0.075){
            //         return('F');
            //     }
            //     else {
            //         if (x > 0 && x < -0.035) {
            //             return ('E');
            //
            //         }
            //     }
            // }

        var getColor = {
            'A': '#ff0000',
            'B': '#ff4040',
            'C': '#b52222',
            'D': '#2fff00',
            'E': '#349127',
            'F': '#2ff000',
        };



        Highcharts.chart('container', {
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie'
            },
            title: {
                text: '涨跌分布图'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        }
                    }
                }
            },

            series: [{
                type: 'pie',
                name: '占比次数:',
                colorByPoint: true,
                data: [{

                    name: '涨跌幅：大于7.5%',
                    y: jsonDataList.big75,
                    sliced: true,
                    selected: true,

                    color: '#ff0000'

                }, {

                    name: '涨跌幅：3.5%到7.5%',
                    y: jsonDataList.Bew35to75,
                    color: '#ff4040'
                }, {

                    name: '涨跌幅：0%到3.5%',
                    y: jsonDataList.Bew0to35,
                    color: '#b52222'

                }, {

                    name: '涨跌幅：-3.5%到0%',
                    y: jsonDataList.Bew_35to0,
                    color: '#349127'
                }, {

                    name: '涨跌幅：-3.5%到-7.5%',
                    y: jsonDataList.Bew_75to_35,
                    color: '#2ff000'
                }, {

                    name: '涨跌幅：小于-7.5%',
                    y: jsonDataList.small_75,
                    color: '#2fff00'

                }]
            }]
        });
    </script>
</body>

</html>